<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屏幕捕获演示</title>
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        .controls {
            margin: 20px 0;
        }
        button {
            padding: 8px 16px;
            margin: 5px;
            cursor: pointer;
        }
        #videoPreview {
            max-width: 100%;
            border: 1px solid #ccc;
            margin: 10px 0;
            display: none;  /* 初始状态隐藏 */
        }
        #screenshot, #recordingPreview {
            max-width: 100%;
            border: 1px solid #ccc;
            margin: 10px 0;
        }
        #saveRecording {
            display: none;
        }
        .preview-section {
            margin: 20px 0;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        .preview-section h2 {
            margin: 0 0 10px 0;
            font-size: 1.2em;
            color: #333;
        }
        .preview-content {
            position: relative;
        }
        .preview-content button {
            margin-top: 10px;
            display: block;
        }
        .frame-section {
            margin: 20px 0;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        .frame-section iframe {
            width: 100%;
            height: 600px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>屏幕捕获演示</h1>
    <div class="controls">
        <button id="startShare">开始屏幕共享</button>
        <button id="stopShare" disabled>停止共享</button>
        <button id="takeScreenshot" disabled>截图</button>
        <button id="startRecording" disabled>开始录制</button>
        <button id="stopRecording" disabled>停止录制</button>
    </div>
    <video id="videoPreview" autoplay muted></video>

    <div class="preview-section" id="screenshotSection" style="display: none;">
        <h2>捕获的截图</h2>
        <div class="preview-content">
            <canvas id="screenshot"></canvas>
            <button id="saveScreenshot">保存截图</button>
        </div>
    </div>

    <div class="preview-section" id="recordingSection" style="display: none;">
        <h2>录制的视频</h2>
        <div class="preview-content">
            <video id="recordingPreview" controls></video>
            <button id="saveRecording" disabled>保存录制</button>
        </div>
    </div>

    <div class="frame-section" id="frameSection">
        <h2>框架内捕获屏幕</h2>
        <iframe src="getDisplayMedia.html"></iframe>
    </div>
    
    <script>
        // 添加框架检测
        const frameSection = document.getElementById('frameSection');
        const isInIframe = window !== window.parent;
        if (isInIframe) {
            frameSection.style.display = 'none';
        }

        let mediaStream = null;
        let mediaRecorder = null;
        let recordedChunks = [];
        let recordedBlob = null;

        const videoElem = document.getElementById('videoPreview');
        const startBtn = document.getElementById('startShare');
        const stopBtn = document.getElementById('stopShare');
        const screenshotBtn = document.getElementById('takeScreenshot');
        const startRecordBtn = document.getElementById('startRecording');
        const stopRecordBtn = document.getElementById('stopRecording');
        const saveRecordBtn = document.getElementById('saveRecording');
        const canvas = document.getElementById('screenshot');
        const recordingPreview = document.getElementById('recordingPreview');
        const screenshotSection = document.getElementById('screenshotSection');
        const recordingSection = document.getElementById('recordingSection');
        const saveScreenshotBtn = document.getElementById('saveScreenshot');

        // 开始屏幕共享
        startBtn.addEventListener('click', async () => {
            try {
                mediaStream = await navigator.mediaDevices.getDisplayMedia({
                    video: true,
                    audio: true
                });
                videoElem.srcObject = mediaStream;
                videoElem.style.display = 'block';  // 显示视频预览
                startBtn.disabled = true;
                stopBtn.disabled = false;
                screenshotBtn.disabled = false;
                startRecordBtn.disabled = false;
            } catch (err) {
                console.error("Error: " + err);
                alert("屏幕捕获被拒绝，请允许屏幕共享权限后重试");
            }
        });

        // 停止屏幕共享
        stopBtn.addEventListener('click', () => {
            if (mediaStream) {
                mediaStream.getTracks().forEach(track => track.stop());
                videoElem.srcObject = null;
                videoElem.style.display = 'none';  // 隐藏视频预览
                startBtn.disabled = false;
                stopBtn.disabled = true;
                screenshotBtn.disabled = true;
                startRecordBtn.disabled = true;
            }
        });

        // 修改截图功能
        screenshotBtn.addEventListener('click', () => {
            canvas.width = videoElem.videoWidth;
            canvas.height = videoElem.videoHeight;
            canvas.getContext('2d').drawImage(videoElem, 0, 0);
            screenshotSection.style.display = 'block';
            canvas.style.display = 'block';
            saveScreenshotBtn.style.display = 'block';
        });

        // 添加保存截图按钮事件
        saveScreenshotBtn.addEventListener('click', () => {
            const link = document.createElement('a');
            link.download = `screenshot-${Date.now()}.png`;
            link.href = canvas.toDataURL('image/png');
            link.click();
        });

        // 开始录制
        startRecordBtn.addEventListener('click', () => {
            recordedChunks = [];
            recordingSection.style.display = 'none';
            recordingPreview.style.display = 'none';
            saveRecordBtn.style.display = 'none';
            
            mediaRecorder = new MediaRecorder(mediaStream);
            
            mediaRecorder.ondataavailable = (e) => {
                if (e.data.size > 0) {
                    recordedChunks.push(e.data);
                }
            };

            mediaRecorder.onstop = () => {
                recordedBlob = new Blob(recordedChunks, {
                    type: 'video/webm'
                });
                const url = URL.createObjectURL(recordedBlob);
                recordingPreview.src = url;
                recordingSection.style.display = 'block';
                recordingPreview.style.display = 'block';
                saveRecordBtn.style.display = 'block';
                saveRecordBtn.disabled = false;
            };

            mediaRecorder.start();
            startRecordBtn.disabled = true;
            stopRecordBtn.disabled = false;
        });

        // 停止录制
        stopRecordBtn.addEventListener('click', () => {
            mediaRecorder.stop();
            startRecordBtn.disabled = false;
            stopRecordBtn.disabled = true;
        });

        // 添加保存按钮事件处理
        saveRecordBtn.addEventListener('click', () => {
            if (recordedBlob) {
                const url = URL.createObjectURL(recordedBlob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `screen-recording-${Date.now()}.webm`;
                a.click();
                URL.revokeObjectURL(url);
            }
        });
    </script>
</body>
</html>
